$(function(){




    //加载页头
    $("#header").load("header.html",function(){
        $(".headerRight").find("li:nth-child(2)").addClass("active");
        //显示时间
        updateTime();
    });



    // 生成时间
    function getWindTime(){
        var date = new Date();
        var hour=date.getHours()
        if(hour<18){
            date.setDate(date.getDate()-1)
            hour=12
        }else{
            hour=00
        }
        var Day = date.getDate()>9?date.getDate():"0"+date.getDate();
        var Year = date.getFullYear();
        var Mouth = date.getMonth()>=9?date.getMonth()+1:"0"+(date.getMonth()+1);
        var end=Year+"/"+Mouth+"/"+Day+" "+hour+":"+"00";
        return end;
    }

    //绘制3小时底部时间轴
    function drawAxisThree(initTime,step,day,endT,num,data){
        var html='' ;
        var j=1;
        var time
        var date=new Date();
        date.setDate(day);
        for(var i=0;i<data.length;i++){
            time=initTime+j*step;

            j++
            html+='<li class="'+(i==0?'active':"")+'" hour="'+data[i].hours+'" year="'+data[i].time+'">'+
                '<span class="upRect"></span>'+
                '<span>'+(time>23?num:time)+':00</span>'
            if(time>23){
                initTime=endT;
                j=0;
                date.setDate(date.getDate()+1)
                html+='<i ></i>'+
                    '<b class="changeDay">'+(date.getMonth()+1)+'/'+date.getDate()+'</b>'
            }
            html+='</li>'
        }
        html+=''
        $(".changeTime ul").html(html)
    }

    //时间切换函数
    function removeWindAxis(){
        var index=0;
        $(".changeTime").unbind();
        $(".changeTime").on("click","button",function(e){
            e.preventDefault();
            var len=$(".changeTime ul li")
            if($(this).hasClass("changeNext")){
                $(this).siblings("button").prop("disabled",false)
                $(".changeTime ul li").eq(index).addClass("displayNone").removeClass("displayBlock")
                $(".changeTime ul li").eq(++index).addClass("active").siblings(".active").removeClass("active")
                if(len.length-index<=8){$(this).prop("disabled",true)}
                var year=len.eq(index).attr("year")
                var hour=len.eq(index).attr("hour")
                wind(year,hour)
            }else{
                --index
                $(this).siblings("button").prop("disabled",false)
                $(".changeTime ul li").eq(index)
                $(".changeTime ul li").eq(index).removeClass("displayNone").addClass("displayBlock").addClass("active").siblings(".active").removeClass("active")
                if(index==0){
                    $(this).prop("disabled",true);
                }
                var year=len.eq(index).attr("year")
                var hour=len.eq(index).attr("hour")
                wind(year,hour)
            }
        })
        $(".changeTime").on("mouseenter","li",function(){
            $(this).addClass("active").siblings(".active").removeClass("active");
            var year=$(this).attr("year")
            var hour=$(this).attr("hour")
            wind(year,hour)
        })

    }
    //增加色标
    function addColorCode(title,colorCode){
        var html=' <p>'+title+'</p><ul>'
        for(var i=0;i<colorCode.length;i++){
            var r=colorCode[i].color.lastIndexOf(",")

            html+='<li>'+
                '<span  style="background: '+colorCode[i].color+'"></span>'+
                '<span>'+colorCode[i].value+' m/s</span>'+
                '</li>'
        }
        html+="</ul>"
        $(".colorCode").html(html)
    }

    //大风灾害函数
    function wind(time,num){
        var mapProductOptions={
            productcategory: 'windex',
            time: time,
            regioncode: '330000',
            method: 'NAFP_FOR_FTM_Smart_ZJ',
            interface: 'getContourEleByTimeAndRegionCode',
            key: 'zjwlzx',
            pwd: '123',
            level: 0,
            validtime: 0,
            gridmethod: 'NAFP_FOR_FTM_Smart_ZJ',
            gridinterface: 'getGridForecastEleGridInRectByTimeAndLevelAndValidtime',
            nlat: 55,
            slat: 18,
            wlon: 116,
            elon: 125,
            isshowzero: false,
            isshowcontrol: true,
            position: "topright",
            isforecast:true
        }
        var product = QXMap.addVectorMapProduct(mapProductOptions, function (data) {
            // console.log("sdfsf",data._data)
            var da=data._data;
            var arr=[];
            var r = [];
            for(var i = 0; i < da.length; i++) {
                for(var j = i + 1; j < da.length; j++)
                    if(da[i].color === da[j].color) j = ++i;
                r.push(da[i]);
            }
            console.log(r)
            addColorCode("风力速度",r)
            if (data == null) return;
        });
        map.setZoom(10);
        map.setCenter({lng:120.570,lat:30.126});
    }




  //加载暴雨控件
  function grid_controller(productcategory){
    QXMap.removeVectorMapProduct(false);

    var mapProductOptions = {
      productcategory: productcategory.type,
      time: productcategory.year,
      regioncode: '330000',
      method: productcategory.nav,
      interface: 'getContourEleByTimeAndRegionCode',
      key: 'zjwlzx',
      pwd: '123',
      level: 0,
      validtime: productcategory.hour,
      gridmethod: productcategory.nav,
      gridinterface: 'getGridForecastEleGridInRectByTimeAndLevelAndValidtime',
      nlat: 55,
      slat: 18,
      wlon: 116,
      elon: 132,
      isshowzero: false,
      isshowcontrol: true,
      position: "topright",
      isforecast:true
    };
    var product = QXMap.addVectorMapProduct(mapProductOptions, function (data) {
      if (data == null) return;
    });
    map.setZoom(10);
    map.setCenter({lng:120.570,lat:30.126});

  }

    //获取数据
    function getData(){
        var time=getWindTime();
        console.log(time);
        v.pubTimeDisplay.val(time);
        time=time.replace(/\//g,"");
        time=time.replace(" ","");
        time=time.replace(/:/g,"")+"00";

        var day=time.slice(6,8)
        console.log(time,day)
        var ajaxUrl='http://10.135.30.116:8080/ZJDataCenter/api/NAFP_FOR_FTM_OCF_ZJ/getContourEleValidtimeListByTime?userid=aa&pwd=123&productcategory=pr03&fcstlevel=0&time='+time+'&timetype=D&admincodes=330000&elements=time,hours&limitcnt=100&dataformat=json'

        $.ajax({
            url:ajaxUrl,
            type:"get",
            success:function(data){
                console.log(data)
                if(data.returnCode==0){

                    var arr=[],arr1=[]
                    for(var i=0 ,hour,list=data.DS;i<list.length;i++){
                        hour=list[i].time.slice(8,10);
                        if(hour==12){
                            arr.push(list[i])
                        }else{
                            arr1.push(list[i])
                        }
                    }
                    if(arr.join("")){
                        publishTime(arr[0].time)
                        wind(arr[0].time,arr[0].hour)
                        drawAxisThree(12,3,day,3,0,arr)
                    }else{
                        publishTime(arr1[0].time)
                        wind(arr1[0].time,arr1[0].hour)
                        drawAxisThree(0,3,day,3,0,arr1)
                    }
                    removeWindAxis();
                    function publishTime(da){
                        var year=da.slice(0,4)
                        var month=da.slice(4,6)
                        var day=da.slice(6,8)
                        var hour=da.slice(8,10)
                        var  str=year+"/"+month+"/"+day+" "+hour+":00"
                        v.pubTimeDisplay.val(str)
                    }
                }
            }
        })
    }

    getData();


})